<template>
  <!-- 匿名插槽 -->
  <slot/>
   <!-- 具名插槽 -->
  <slot name='title'/>
  <!-- 作用域插槽 -->
  <slot name="footer" :scope="state" />
</template>
<script lang="ts" setup>
import { useSlots, reactive } from 'vue'
const state = reactive({
  name: '张三',
  age: '25岁'
})

const slots = useSlots()
// 匿名插槽使用情况
const defaultSlot = reactive(slots.default && slots.default().length)
console.log(defaultSlot) // 1
// 具名插槽使用情况
const titleSlot = reactive(slots.title && slots.title().length)
console.log(titleSlot) // 3
</script>
